<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta charset="utf-8" />
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			.all {
				padding-top: 40px;
				padding-bottom: 50px;
			}

			img {
				border: 0px;
				vertical-align: middle;
				width: 100%;
			}

			.clearfix:after {
				content: "";
				clear: both;
				display: table
			}

			.fl {
				float: left
			}

			.header {
				background: #f2f2f2;
				font-weight: 900;
				height: 40px;
				text-align: center;
				line-height: 40px;
				position: fixed;
				top: 0px;
				left: 0px;
				width: 100%;
				z-index: 999;
			}

			.header img {
				width: 25px;
				position: absolute;
				right: 3%;
				top: 15%;
			}

			.search {
				background: #f2f2f2;
				padding: 10px;
				text-align: center;
				line-height: 30px;
			}

			.search .input {
				height: 30px;
				background: white;
				border-radius: 5px;
			}

			.search span {
				background: url(search.png) no-repeat 3px center;
				padding-left: 30px;
				font-size: 14px;

			}

			.chat {
				background: white;
				position: relative;
				margin: 5px auto;
			}

			.pic {
				width: 15%;
				padding: 2%;
				box-sizing: border-box;
			}

			.pic img {
				border-radius: 4px;
			}

			.txt {
				width: 85%;
				padding: 2%;
				box-sizing: border-box;
				border-bottom: 1px solid #ccc;
			}

			.title {
				font-weight: 900;
				font-size: 14px;
			}

			.msg {
				font-size: 12px;
				color: #999;
				margin-top: 2%;
			}

			.time {
				position: absolute;
				right: 5%;
				top: 5px;
				font-size: 10px;
				color: #999;
			}

			.nav {
				height: 50px;
				background: #f6f6f6;
				position: fixed;
				bottom: 0px;
				left: 0px;
				width: 100%;
				z-index: 999;
			}

			.nav>div {
				font-size: 10px;
				width: 25%;
				text-align: center;
				line-height: 75px;
				background: url(wechat.png) no-repeat center 3px;
			}

			.nav>div.friends {
				background-image: url(friends.png);
			}

			.nav>div.quanquan {
				background-image: url(quanquan.png);
			}

			.nav>div.my {
				background-image: url(my.png);
			}

			.add_menu {
				position: absolute;
				right: 8px;
				top: 38px;
				z-index: 1000;
				display: none;
				position: fixed;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<!-- 头部开始 -->
			<div class="header">微信
				<img src="add.png" onclick="showOrHide()" />
			</div>
			<!-- 头部结束 -->

			<!-- 搜索框开始 -->
			<div class="search">
				<div class="input">
					<span><img src="weixinsousuo.png" style="width:5%">搜索

</span>
				</div>
			</div>
			<!-- 搜索框结束 -->

			<!-- 聊天列表开始 -->
			<div class="chatlist">
				<script>
					for (var i = 1; i <= 100; i++) {

						document.write("<div class='chat clearfix'>");
						document.write("<div class='pic fl'>");
						document.write("<img src='1.png' />");
						document.write("</div>");
						document.write("<div class='txt fl'>");
						document.write("<div class='title'>娃娃机</div>");
						document.write("<div class='msg'>小帅哥快来玩呀~</div>");
						document.write("</div>");
						document.write("<div class='time'>下午19:32</div>");
						document.write("</div>");

					}
				</script>
			</div>
			<!-- 聊天列表结束 -->

			<!-- 底部导航开始 -->
			<div class="nav clearfix">
				<div class="wechat fl">微信</div>
				<div class="friends fl">通讯录</div>
				<div class="quanquan fl">发现</div>
				<div class="my fl">我</div>
			</div>
			<!-- 底部导航结束 -->

			<div class="add_menu" id="addMenu">
				<img src="add_menu.png" />
			</div>

		</div>

		<script>
			var i = 0;

			function showOrHide() {
				if (i == 0) {
					addMenu.style.display = "block";
					i = 1;
				} else {
					addMenu.style.display = "none";
					i = 0;
				}
			}
		</script>
	</body>
</html>
